<script setup>
import cmpnts from "pkgs/cmpnts"
import { store } from "pkgs/stores"
import { useAttrs, ref, watch } from 'vue';
const attrs = useAttrs();
const form = ref({})
const props = defineProps({
    rules: {
        type: Object,
        default() {
            return {}
        }
    }
})
attrs['fields'].forEach(element => {
    form.value[element.name] = {};
});


</script>
<template>
    <el-form :model="form" v-bind="$attrs" v-on="$listeners">
        <template v-if="$attrs.layoutNum > 0">
            <el-row>
                <el-col :span="Math.floor(24 / $attrs.layoutNum)" v-for="field in $attrs['fields']" :key="field.name">
                    <el-form-item class="w-100" :prop="field.name" :label="$attrs.showLabel ? field.title : ''">
                        <x-cmpnt-renders fullRow="true" :cmpnts="field.cmpnts" :data="form"></x-cmpnt-renders>
                    </el-form-item>
                </el-col>
            </el-row>
        </template>

        <el-form-item :prop="field.name" v-else v-for="field in $attrs['fields']" :key="field.name"
            :label="$attrs.showLabel ? field.title : ''">
            <x-cmpnt-renders :cmpnts="field.cmpnts" :data="form" :parent="{}"></x-cmpnt-renders>

        </el-form-item>
    </el-form>
</template>
<style scoped>
:deep(.el-form-item) {
    margin-right: 10px !important;
}
</style>